<script setup lang="ts">
//@ts-nocheck
import { ref } from "vue";
import {
  addArea,
  addPolyline,
  getSysDictionaryByType,
  isOverlapArea,
} from "@/api/pipe/index";
import { calcPolygonArea } from "@/views/layer/area/utils";
import { useMapStore } from "@/store";
import { useLocalStore } from "@/views/layer/area/store";

const centerDialogVisible = ref(true);
const typeOptions = ref([]);
const ruleFormRef = ref();
const totalArea = ref(0);
const mapStore = useMapStore();
const localStore = useLocalStore();

getSysDictionaryByType({
  pageSize: 1000,
  pageIndex: 1,
  dicTypeId: 1,
}).then(({ data, succeeded }) => {
  if (succeeded) {
    typeOptions.value = data.items.map((item: any) => {
      const { dictName, dictId } = item;
      return {
        value: dictId,
        label: dictName,
      };
    });
  }
});
const onChange = (value: any) => {};
const props = defineProps({
  coords: String, // 接收父组件传过来的点位坐标
});
const form = reactive({
  polygonName: "",
  polygonType: null, // 1-巡检区域 2-DMA分区 0-其他区域
  jsonPolygon: "",
});

const rules = reactive({
  polygonName: [
    {
      required: true,
      message: "请输入区域名称",
    },
  ],
  polygonType: [
    {
      required: true,
      message: "请选择区域类型",
    },
  ],
});
const onSubmit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const { data, succeeded } = await isOverlapArea({
        ...form,
        polygonId: 0,
      });
      if (succeeded && data.code === 1) {
        ElMessage.error("与同类型的区域存在重叠，请重新绘制！");
        return;
      }
      addArea(form).then((res) => {
        if (res.statusCode === 200) {
          centerDialogVisible.value = false;
          ElMessage({
            message: "已保存成功。",
            type: "success",
          });
          mapStore.setAreaCoordinates("");
          localStore.increaseUpdateFlagCount();
        } else {
          ElMessage.error(res.errors);
        }
      });
    }
  });
};
watchEffect(() => {
  if (props.coords) {
    const pts = JSON.parse(props.coords);
    totalArea.value = (calcPolygonArea(pts) / 1000000).toFixed(4) + "平方公里";
    form.jsonPolygon = props.coords;
  }
});
</script>

<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="editor ? '修改区域' : '添加区域'"
    width="500"
    align-center
    @close="mapStore.setAreaCoordinates('');"
  >
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="rules"
      class="content"
      label-position="right"
      label-width="95px"
    >
      <el-form-item label="区域名称：" prop="polygonName">
        <el-input v-model="form.polygonName" />
      </el-form-item>
      <el-form-item label="区域类型：" prop="polygonType">
        <el-select
          v-model="form.polygonType"
          placeholder="请选择区域类型"
          @change="onChange"
          :disabled="!!editor"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="区域面积：">
        <el-input v-model="totalArea" disabled />
      </el-form-item>
      <el-form-item class="twoButtons">
        <el-button type="primary" @click="onSubmit(ruleFormRef)"
          >保存</el-button
        >
        <el-button
          @click="
            centerDialogVisible = false;
            mapStore.setAreaCoordinates('');
          "
          >取消</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">
.content {
  padding: 10px 30px 0;
}

.row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;

  span:nth-child(1) {
    width: 100px;
    padding-right: 12px;
    text-align: right;
  }
}

.twoButtons {
  :deep(.el-form-item__content) {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px;
    margin-left: 50px;
  }
}
</style>
